import React, { useState, useEffect } from 'react'
import { Card, Input, Button, Select } from 'antd'
import { Editor, Toolbar } from '@wangeditor/editor-for-react'
import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
import { addArticleItem, getCategories } from '@/api/article'
import { history } from 'umi'
import styles from '../ads/components/modal.less'
import '@wangeditor/editor/dist/css/style.css' // 引入 css


type Props = {}

const { Option } = Select;

export default function create({ }: Props) {
    const [options, setOptions] = useState([])
    const [cate, setCate] = useState([])
    const [ipt, setIpt] = useState("")
    // editor 实例
    const [editor, setEditor] = useState<IDomEditor | null>(null)   // TS 语法
    // const [editor, setEditor] = useState(null)                   // JS 语法

    // 编辑器内容
    const [html, setHtml] = useState('')
    // 模拟 ajax 请求，异步设置 html

    // 工具栏配置
    const toolbarConfig: Partial<IToolbarConfig> = {}  // TS 语法
    // const toolbarConfig = { }                        // JS 语法

    // 编辑器配置
    const editorConfig: Partial<IEditorConfig> = {    // TS 语法
        // const editorConfig = {                         // JS 语法
        placeholder: '请输入内容...',
    }

    const handleChange = (value: any) => {
        setCate(value)
    };
    

    useEffect( () => {
        getCategories().then(res => {
            setOptions(res.data[1].children)
        })
    }, [])

    // 及时销毁 editor ，重要！
    useEffect(() => {
        return () => {
            if (editor == null) return
            editor.destroy()
            setEditor(null)
        }
    }, [editor])

    const add = async () => {
        await addArticleItem({
            cate,
            title: ipt,
            content: html
        })
        history.push("/article/list")
    }
    return (
        <div className='mt15'>
            <Card>
                <div className={[styles.flex, 'mb20'].join(" ")}>
                    <span className='right'>
                        所属分类
                    </span>
                    <div className='ml20'>
                        <Select
                            mode="multiple"
                            allowClear
                            style={{ width: '100%' }}
                            onChange={handleChange}
                        >
                            {
                                options.map((item: any) => {
                                    return <Option key={item._id}>
                                        { item.name }
                                    </Option>
                                })
                            }
                        </Select>
                    </div>
                </div>

                <div className={[styles.flex, 'mb20'].join(" ")}>
                    <span className='right'>
                        标题
                    </span>
                    <div className='ml20'>
                        <Input value={ipt} onChange={(ev) => {
                            setIpt(ev.target.value)
                        }}/>
                    </div>
                </div>

                <div className={[styles.flex, 'mb20'].join(" ")}>
                    <span className='right'>
                        内容
                    </span>
                    <div className='ml20'>
                        <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
                            <Toolbar
                                editor={editor}
                                defaultConfig={toolbarConfig}
                                mode="default"
                                style={{ borderBottom: '1px solid #ccc' }}
                            />
                            <Editor
                                defaultConfig={editorConfig}
                                value={html}
                                onCreated={setEditor}
                                onChange={editor => setHtml(editor.getHtml())}
                                mode="default"
                                style={{ height: '500px', overflowY: 'hidden' }}
                            />
                        </div>
                    </div>
                </div>

                <div className={[styles.flex, 'mb20'].join(" ")}>
                    <span className='right'>

                    </span>
                    <div className='ml20'>
                        <Button onClick={add} type="primary">保存</Button>
                    </div>
                </div>
            </Card>
        </div>
    )
}